<script src="login.service.ts"></script>
<ion-header>
  <ion-navbar>
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>登录</ion-title>
  </ion-navbar>
</ion-header>

<ion-content>
  <ion-segment [(ngModel)]="tab" color="primary">
    <ion-segment-button value="PHONE">
      快速登录
    </ion-segment-button>
    <ion-segment-button value="password">
      密码登录
    </ion-segment-button>
  </ion-segment>

  <div [ngSwitch]="tab">
    <form *ngSwitchCase="'PHONE'" no-lines>
      <ion-item>
        <ion-icon ios="ios-phone-portrait" md="md-phone-portrait"></ion-icon>
        <input [(ngModel)]="fastLoginForm.cellphone" name="cellphone" type="number" placeholder="请输入手机号"/>
        <ion-icon class="clear" margin-right [hidden]="!fastLoginForm.cellphone"
                  (click)="fastLoginForm.cellphone = null" ios="ios-close-circle" md="md-close-circle"></ion-icon>
      </ion-item>
      <ion-item>
        <ion-icon ios="ios-card" md="md-card"></ion-icon>
        <input class="verification-input" [(ngModel)]="fastLoginForm.verificationCode" name="verificationCode"
               type="number" placeholder="请输入验证码"/>
        <ion-icon class="clear" style="margin-right: 5px" [hidden]="!fastLoginForm.verificationCode"
                  ios="ios-close-circle" md="md-close-circle"
                  (click)="fastLoginForm.verificationCode = null"></ion-icon>
        <span (click)="sendVerificationCode(fastLoginForm.cellphone)"
              [ngClass]="{'send-verification-code':true,'disabled-verification-message': smsDisable}"
              margin-right float-end>{{sendVerificationCodeMessage}}</span>
      </ion-item>
      <ion-item no-lines>
        <button [disabled]="!fastLoginBtnEnable()" ion-button (click)="loginClick()" full
                style="margin-top:35px;height: 45px">登录
        </button>
      </ion-item>
    </form>
    <form *ngSwitchCase="'password'">
      <ion-item>
        <ion-icon style="color:#488aff" ios="ios-phone-portrait" md="md-phone-portrait"></ion-icon>
        <input type="number" name="cellphone" placeholder="请输入手机号"
               [(ngModel)]="passwordLoginForm.cellphone">
        <ion-icon [hidden]="!passwordLoginForm.cellphone" class="clear" ios="ios-close-circle" md="md-close-circle"
                  (click)="passwordLoginForm.cellphone = null"></ion-icon>
      </ion-item>
      <ion-item>
        <ion-icon style="color:#488aff" ios="ios-phone-portrait" md="md-phone-portrait"></ion-icon>
        <input type="password" name="cellphone" placeholder="请输入密码" [(ngModel)]="passwordLoginForm.password">
        <ion-icon [hidden]="!passwordLoginForm.password" class="clear" ios="ios-close-circle" md="md-close-circle"
                  (click)="passwordLoginForm.password = null"></ion-icon>
      </ion-item>
      <ion-item no-lines>
        <button [disabled]="!passwordLoginBtnEnable()" ion-button (click)="loginClick()" full
                style="margin-top:35px;height: 45px">登录
        </button>
      </ion-item>
    </form>
    <ion-row responsive-sm text-center>
      <ion-col (click)="toRegister()">
        没有账号去注册
      </ion-col>
    </ion-row>
  </div>
</ion-content>
